//1.设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net'

//获取元素
const tb = document.querySelector('#tb');
const form = document.querySelector('#bookForm');



// //测试
// axios.get('/api/getbooks').then(({ data: res }) => console.log(res))

//封装一个渲染函数
const renderBooks = () => {
  //发起请求，请求渲染的数据
  axios.get('/api/getbooks').then(({ data: res }) => {
    const { data } = res

    const html = data.map(item => {
      return `<tr>
           <td>${item.id}</td>
           <td>${item.bookname}</td>
           <td>${item.author}</td>
           <td>${item.publisher}</td>
           <td><a href="#" data-id="${item.id}">删除</a></td>
         </tr>`
    }).join('')


    //渲染真实dom
    tb.innerHTML = html
  })

}

//页面加载，调用渲染函数渲染页面
renderBooks()

form.addEventListener('submit', function (e) {
  //阻止默认提交事件
  e.preventDefault()

  //使用serialize插件获取表单数据
  const data = serialize(form, { hash: true })

  //发起添加请求
  axios.post('/api/addbook', data).then(({ data: res }) => {
    alert(res.msg)

    if (res.status !== 201) return

    this.reset()

    //成功添加之后重新渲染页面
    renderBooks()
  })
})

//删除事件
tb.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    //获取自定义属性id
    let id = e.target.dataset.id

    //发起删除请求
    axios.get('/api/delbook?id=' + id).then(({ data: res }) => {
      //删除完以后重新渲染
      renderBooks()
    })
  }
})





